<template>
  <!-- 时间 -->
  <div class="search_time">
    <el-date-picker v-model="beginTime" type="date" placeholder="选择日期" :picker-options="pickerOptions"
      @change="changeBeginTime"
      :append-to-body="false">
    </el-date-picker>
    <span class="time_range">-</span>
    <el-date-picker v-model="endTime" align="right" type="date" placeholder="选择日期" @change="changeEndTime"
    :append-to-body="false">
    </el-date-picker>
  </div>
</template>
<script>
import moment from "moment";
export default {
  name: 'SearchTime',
  props: {
    clearTime: { // 重置时
      type: Boolean,
      required: false
    },
    initTime: { // 初始化时给定默认时间
      type: Array,
      required: false
    },
    disableTime: {
      type: String,
      default: ''
    }
  },
  watch: {
    clearTime: function (value) {
      if (value === true) {
        this.beginTime = ''
        this.endTime = ''
      }
    },
    initTime:{
      handler (val) {
      if (val) {
        this.beginTime = new Date(val[0])
        this.endTime = new Date(val[1])
        this.$emit('getTimes', [val[0], val[1]])
      }
    },
    immediate:true,
    }
  },
  computed: {

  },
  data() {
    return {
      beginTime: '',
      endTime: '',
      // 快捷选项选择日期
      pickerOptions: {
        // disabledDate: (time) => {
        //   return this.dealDisabledDate(time)
        // },
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              const end = new Date()
              // const start = new Date()
              // start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
              picker.$emit('pick', [end, end])
            }
          },
          {
            text: '最近三天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 2)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      timeDefaultShow: ''
    }
  },
  created() {
    this.timeDefaultShow = new Date();
    this.timeDefaultShow.setMonth(new Date().getMonth() - 1);
  },
  methods: {
    setDate() {
      const today = new Date();
      const todayBegin = moment(today).format("yyyy-MM-DD") + " 00:00:00";
      const todayEnd = moment(today).format("yyyy-MM-DD") + " 23:59:59";
      this.beginTime = todayBegin
      this.endTime = todayBegin

    },
    changeBeginTime(val) {
      if(val instanceof Array){
        this.beginTime = moment(val[0]).format("yyyy-MM-DD")
        if(val.length>1){
          this.endTime = moment(val[1]).format("yyyy-MM-DD")
        }
      }else{
        if(val){
          this.beginTime = moment(val).format("yyyy-MM-DD")
        }else{
          this.beginTime = val
        }
        
      }
      this.$emit('getTimes', [this.beginTime,this.endTime])

    },
    changeEndTime(val) {
      if(val){
        this.endTime = moment(val).format("yyyy-MM-DD")
      }else{
        this.endTime = val
      }
      this.$emit('getTimes', [this.beginTime,this.endTime])
    },

    changeTime(val) {
      console.log('这里没有调用吧');
      this.$emit('getTimes', val)
    },
    dealDisabledDate(time) { // 禁止选择的时间段
      var times = Date.now()
      if (this.disableTime === '') {
        // return time
      } else if (this.disableTime === 'before') { // 禁止选择今天之前的时间
        return time.getTime() < new Date().getTime() - 86400000
      } else if (this.disableTime === 'after') { // 禁止选择今天之后的时间
        return time.getTime() > times
      }
    }
  }
}
</script>

<style lang="less" scoped>
.search_time {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .time_range {
    color: #D8D8D8;
    margin-left: 10px;
    margin-right: 10px;
  }
}
</style>
